<template>
	<view class="home">
		<view class="Payment">
			<radio-group class="payment_items" @change="RadioChange">
				<label class="payment_item" v-for="(item,index) in RadioItems" :key="index">
					<view>
						<label class="payment_name" :for="item.name">
							<text>{{item.values}}</text>
						</label>
					</view>
					<view>
						<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
					</view>

				</label>
			</radio-group>
		</view>

		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item label="昵称" label-width="150" label-align="center" prop="name">
					<u-input v-model="form.name" placeholder="请输入昵称" maxlength="10" />
				</u-form-item>
				<u-form-item label="电话" label-width="150" label-align="center" prop="telephone">
					<u-input v-model="form.telephone" placeholder="请输入电话" @click="show_KEY" :clearable="true" />
				</u-form-item>
				<u-form-item :label="get" label-width="150" label-align="center" prop="intro">
					<u-input v-model="form.intro" placeholder="请输入买饭地点" />
				</u-form-item>
				<u-form-item :label="give" label-width="150" label-align="center">
					<view class="" @click="Select" style="width: 390rpx;height: 30px;line-height: 30px;">{{form.give_Address}}</view>
				</u-form-item>
				<u-form-item label="金额" label-width="150" label-align="center">
					<u-input v-model="form.money" placeholder="请输入金额" @click="show_KEYmoney" />
				</u-form-item>
				<u-form-item :label="time" label-width="150" label-align="center">
					<view class="" @tap="visible=true" style="width: 390rpx;height: 30px;line-height: 30px;">{{form.time}}</view>
				</u-form-item>
			</u-form>
			<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
			<u-picker mode="time" v-model="SHOW" :params="params" @confirm="select_time"></u-picker>

			<!-- 支付区域 -->
			<view class="giveMe_money">
				<view class="manner">
					支付方式
				</view>
				<view class="payment">
					<radio-group class="payment_items" @change="radioChange">
						<label class="payment_item" v-for="(item,index) in radioItems" :key="index">
							<view class="payment-radios">
								<label class="payment_name" :for="item.name">
									<text>{{item.values}}</text>
								</label>
							</view>
							<view>
								<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
							</view>
						</label>
					</radio-group>
				</view>
			</view>

			<u-mask :show="show_Mask" @click="show_Mask = false" z-index="500">
				<view class="warp">
					<view class="rect" @tap.stop>
						<view class="rect_item1">
							<image src="../../static/icon/Error.png" mode="" @click="show_Mask = false"></image>
							<view class="">请输入支付密码</view>
						</view>
						<view class="rect_item2">长大跑腿</view>
						<view class="rect_item3">{{form.money}}元</view>

						<view @click="input_focus">
							<u-message-input :focus="true" :breathe="true" :dot-fill="true" width="43" style="margin-top: 40px;border: 1px solid #FFFFFF;"
							 v-model="password" :disabled-keyboard="true" :maxlength="6"></u-message-input>
						</view>
					</view>
				</view>
			</u-mask>


			<u-keyboard ref="uKeyboard" mode="number" v-model="show_keyboard" :mask="false" :dot-enabled="dot" @change="valchange"
			 @confirm="finish" @backspace="backspace" z-index="50000"></u-keyboard>


			<view class="button">
				<u-button class="u-button" @click="submit" :ripple="true" type="primary">提交</u-button>
			</view>
		</view>

		<w-picker :visible.sync="visible" mode="shortTerm" value="2020-04-08 13:18:00" :current="true" expand="60" @confirm="onConfirm($event,'shortTerm')"
		 @cancel="onCancel" ref="shortTerm"></w-picker>
		 
	</view>
</template>

<script>
	import wPicker from "@/pagesD/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				visible: false,
				form: {
					name: '',
					intro: '',
					telephone: '',
					give_Address: '点击选择',
					money: '',
					time: '点击选择',
					number: '',
					type: 1
				},
				rules: {
					name: [{
							min: 2,
							message: '昵称不能少于2个字',
							trigger: 'change'
						},
						{
							required: true,
							message: '请输入昵称',
							//可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						}
					],
					intro: [{
						min: 5,
						message: '地址不能少于5个字',
						trigger: ['change']
					}, {
						required: true,
						message: '请输入地址',
						//可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}],
					telephone: [{
						len: 11,
						message: '电话号码不正确',
						//可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}],
					money: [{
						message: '请输入金额',
						//可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}]
				},
				show: false,
				SHOW: false,
				show_keyboard: false,
				list: [{
						label: '汇泽',
						children: [{
								value: {
									x: '113.034698',
									y: '28.250014'
								},
								label: '二栋',
								children: [{
										label: '605'
									},
									{
										label: '606'
									}
								]
							},
							{
								value: {
									x: '113.038821',
									y: '28.249482'
								},
								label: '六栋',
								children: [{
										label: '604'
									},
									{
										label: '605'
									},
									{
										label: '205'
									}
								]
							}
						]
					},
					{
						label: '洪山',
						children: [{
							value: {
								x: '113.038902',
								y: '28.2519'
							},
							label: '十一栋',
							children: [{
									label: '2201'
								},
								{
									label: '2203'
								},
								{
									label: '2509'
								}
							]
						}]
					}
				],
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				dot: false,
				telephone_num: 0,
				money_num: 0,
				if_type: 0,
				flag: 0,
				radioItems: [{
						name: 'weixin',
						values: '微信',
						checked: 'true'
					},
					{
						name: 'zhifubao',
						values: '支付宝'
					}
				],
				order: 'weixin',
				show_Mask: false,
				Show: false,
				password: '',
				password_num: 0,
				RadioItems: [{
						name: 'box',
						values: '盒饭',
						checked: 'true'
					},
					{
						name: 'food',
						values: '零食'
					}
				],
				get: '买饭地点',
				give: '送饭地点',
				time: '送饭时间'
			}
		},
		methods: {
			onCancel() {

			},
			onConfirm(res, type) {
				console.log(res,type);
				this.form.time = res.result.split(' ')[1]
			},
			submit() {
				if (this.form.give_Address == '点击选择' || this.form.time == '点击选择') {
					uni.showModal({
						title: '温馨提示',
						content: '请输入送达点或者送达时间',
						showCancel: false
					})
					return;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.flag = 1;
						this.if_type = 3;
						this.show_Mask = true;
						this.show_keyboard = true;
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			Select() {
				this.show = !this.show;
			},
			Select_time() {
				this.SHOW = !this.SHOW;
			},
			confirm(e) {
				let complete_address = e[0].label + e[1].label + e[2].label;
				this.form.give_Address = complete_address;
			},
			select_time(e) {
				let complete_time = e.hour + ':' + e.minute;
				console.log(e,'this is e');
				this.form.time = complete_time;
				console.log(this.form,'this is from');
			},
			show_KEY() {
				this.if_type = 1;
				this.show_keyboard = true;
			},
			valchange(e) {
				if (this.if_type == 1) {
					this.form.telephone += e;
				} else if (this.if_type == 2) {
					this.form.money += e;
				} else {
					if (this.password.length == 6) {
						return;
					}
					this.password += e;
				}
			},
			finish() {
				console.log('这是完成')
				if (this.if_type == 3) {
					if (this.password.length < 6) {
						this.show_Mask = true;
						return;
					}

					if (this.password == '123456') {
						this.asyncSubmit();
						console.log('点击完成')
						this.show_Mask =	 false;
						this.password = ''
					} else {
						uni.showModal({
							title: '提醒',
							content: '您输入的密码有误哦',
							showCancel: false,

							success: (res) => {
								if (res.confirm) {
									console.log('用户点击了确定按钮');
									this.password = '';
									this.show_Mask = true;
									this.show_keyboard = true;
								}
							}
						})
						this.show_Mask = false;
						this.show_keyboard = false;
					}
				}
			},
			backspace() {
				if (this.if_type == 1) {
					this.telephone_num = this.form.telephone.length;
					this.form.telephone = this.form.telephone.substring(0, this.telephone_num - 1);
					--this.telephone_num;
				} else if (this.if_type == 2) {
					this.money_num = this.form.money.length;
					this.form.money = this.form.money.substring(0, this.money - 1);
					--this.money_num;
				} else {
					if (this.password.length == 0) {
						return;
					}
					this.password_num = this.password.length;
					this.password = this.password.substring(0, this.password_num - 1);
					--this.password_num;
					if (this.password_num == 0) {
						return;
					}
				}

			},
			show_KEYmoney() {
				this.dot = true;
				this.show_keyboard = true;
				this.if_type = 2;
			},
			async asyncSubmit() {
				const res = await uni.request({
					url: `http://3888n9t950.wicp.vip/Add_boxTask?message=${JSON.stringify(this.form)}`
				})
				//改成全局请求的封装
				// const res = await this.$myRequest({
				// 	url: `/Add_boxTask?message=${JSON.stringify(this.form)}`
				// })
				// console.log(res)
				if (res[1].data.code == 0) {
					this.show_keyboard = false;
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}

			},
			radioChange(e) {
				if (e == undefined) {
					return this.order;
				}
				this.order = e.target.value;
			},
			input_focus() {
				this.if_type = 3;
				this.dot = false;
				this.show_keyboard = true;
			},
			RadioChange(e) {
				if (e.detail.value == 'food') {
					this.form.type = 2;
					this.get = '买物地点';
					this.give = '送物地点';
					this.time = '送物时间'
				} else {
					this.form.type = 1;
					this.get = '买饭地点';
					this.give = '送饭地点';
					this.time = '送饭时间'
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			// console.log(options.number,'打印')
			// this.form.number = 135955959;
			this.form.number = options.number;
		}
	}
</script>

<style lang="scss">
	.home {
		width: 750rpx;

		.content {
			width: 650rpx;
			margin: 0 auto;
			font-size: 30rpx;
		}

		.button {
			width: 100%;
			height: 100rpx;

			.u-button {
				background-color: $main-color !important;
			}

			margin: 30rpx auto;
		}


		.giveMe_money {
			display: flex;
			border-radius: 30rpx;

			.manner {
				width: 150rpx;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 30rpx;
			}

			.payment {
				height: 100rpx;
				line-height: 100rpx;

				radio-group {
					display: flex;
					align-items: center;

					.payment_item {
						display: flex;
						align-items: center;
						margin-top: 5px;
						margin-right: 20rpx;

						.payment_name {
							margin-right: 20rpx;
						}

						.payment-radios:nth-child(1) {
							margin-left: 60rpx;

							radio {
								display: block;
								margin: 0 auto;
								background-color: $main-color;
								transform: scale(0.7);
								color: rgba(0, 0, 0, 0.6);
								background-color: #fff;
							}

						}


					}
				}
			}
		}

		.money_button {
			margin-top: 20rpx;
			width: 100px;
			background: green;
		}

		.warp {
			display: flex;
			height: 100%;
		}

		.rect {
			width: 220px;
			height: 220px;
			background-color: #fff;

			margin: 0 auto;
			margin-top: 150rpx;
			border-radius: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.rect_item1 {
				display: flex;
				font-size: 30rpx;

				image {
					width: 20px;
					height: 20px;
				}

				view {
					margin-left: 45rpx;
				}
			}

			.rect_item2 {
				font-size: 30rpx;
				text-align: center;
			}

			.rect_item3 {
				margin-top: 20rpx;
				text-align: center;
			}

			.keyboard {
				width: 90%;
				margin: 0 auto;
				margin-bottom: 15%;
			}
		}

		.Payment {
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 100rpx;

			radio-group {
				display: flex;

				.payment_item {
					display: flex;
					align-items: center;
					margin: 10rpx 60rpx;

					.payment_name {
						margin-right: 20rpx;
					}

					view:nth-child(1) {
						radio {
							display: block;

							margin: 0 auto;
							width: 50rpx;
						}
					}
				}
			}
		}

	}
</style>
